<template>
  <div>
    <div>
      <el-form :inline="true" :model="queryForm" class="demo-form-inline">
        <el-form-item>
          <el-input v-model="queryForm.title" placeholder="输入关键词" clearable />
        </el-form-item>
        <el-form-item>
          <el-select v-model="queryForm.petTag" placeholder="宠物标签" clearable>
            <el-option v-for="tagItem in petTagList" :key="tagItem.id" :label="tagItem.title" :value="tagItem.id" />
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-select v-model="queryForm.region" placeholder="宠物类型" clearable>
            <el-option v-for="tagItem in petTagList" :key="tagItem.id" :label="tagItem.title" :value="tagItem.id" />
          </el-select>
        </el-form-item>
      </el-form>
    </div>
    <div class="pet-list">
      <el-card v-for="item in petList" :key="item.id">
        <template #header>
          <img :src="item.cover" style="width: 240px; height: 200px" />
        </template>
        <div style="display: flex;flex-direction: column;line-height: 1.6em;">
          <span style="font-size: 16px;font-weight: 700;">
            <span>{{item.title}}</span>
            <span>
              <el-icon>
                <Female v-if="item.sex" style="color:blue;"/>
                <Male v-else style="color:pink;"/>
              </el-icon>
            </span>
          </span>
          <span>分类：{{item.petTypeName}}</span>
          <span
            class="multi-line-ellipsis">简介:{{item.description}}</span>
          <el-button type="primary" style="width: 100%;" @click="handlePetAdoption(item.id)">领养</el-button>
        </div>
      </el-card>
    </div>
    <address-dialog v-model="addressDialogVisible" :petId='currentPetId'></address-dialog>
  </div>
</template>

<script setup>
import { onMounted, ref } from "vue";
import * as commonApi from "@/api/common.js";
import AddressDialog from './components/addressDialog.vue'

const queryForm = ref({
  title: '',
  petTag: '',
  petType: '',
  page:1,
  size:10,
});
const addressDialogVisible = ref(false)
const handlePetAdoption = (id) => {
  currentPetId.value = id
  addressDialogVisible.value = true
}
const petTagList = ref([]);
const petTypeList = ref([]);
const petList = ref([]);
const currentPetId = ref('')
onMounted(async () => {
  const tagRes = await commonApi.getPetTagList();
  const typeRes = await commonApi.getPetTypeList();
  const petRes = await commonApi.getPetList(queryForm.value);
  petTagList.value = tagRes.data;
  petTypeList.value = typeRes.data;
  petList.value = petRes.data.records;
});
</script>

<style scoped lang="scss">
.pet-list {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
}

.multi-line-ellipsis {
  height: 60px;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  text-overflow: ellipsis;
  width: 100%;
  max-height: 3.2em;
  word-break: keep-all;
  overflow-wrap: break-word;
}

:deep() {
  .el-card {
    width: 275px;
  }

  .el-select {
    min-width: 150px;
  }
}
</style>